<template>
  <el-row type="flex" justify="space-between" class="header">
    <span style="color: pink; font-size: 12px;">说明: 目前支持学科和关键字条件筛选</span>
    <el-button type="success" @click="$router.push({path:'new'})">
      <el-icon>
        <EditPen />
      </el-icon>
      新增试题
    </el-button>
  </el-row>
  <el-form :model="form" ref="vForm" :rules="rules" label-position="right" label-width="80px" size="medium"
    @submit.prevent>
    <el-row>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="学科" prop="subjectID">
          <el-select v-model="form.subjectID" class="full-width-input" clearable @change="change">
            <el-option v-for="(item, index) in subjectIDOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="form.catalogID" class="full-width-input" clearable>
            <el-option v-for="(item, index) in catalogIDOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="标签" prop="tags" @click="getTags()">
          <el-select v-model="form.tags" class="full-width-input" clearable>
            <el-option v-for="(item, index) in tagsOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="form.keyword" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="试题类型" prop="questionType">
          <el-select v-model="form.questionType" class="full-width-input" clearable>
            <el-option v-for="(item, index) in questionTypeOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="form.difficulty" class="full-width-input" clearable>
            <el-option v-for="(item, index) in difficultyOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="方向" prop="direction">
          <el-select v-model="form.direction" class="full-width-input" clearable>
            <el-option v-for="(item, index) in directionOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="录入人" prop="creator">
          <el-select v-model="form.creator" class="full-width-input" clearable>
            <el-option v-for="(item, index) in creatorOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="form.remarks" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="form.shortName" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="城市" prop="city">
          <el-select v-model="form.provinces" class="full-width-input" clearable style="width:50%" @change="changeCity">
            <el-option v-for="(item, index) in cityOptions.provinces" :key="index" :label="item" :value="item"
              :disabled="item.disabled"></el-option>
          </el-select>
          <el-select v-model="form.city" class="full-width-input" clearable style="width:50%">
            <el-option v-for="(item, index) in cityOptions.citys" :key="index" :label="item" :value="item"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell" type="flex" justify="end">
        <el-row type="flex" justify="end">
          <el-button @click="empty">清除</el-button>
          <el-button type="primary" @click="$emit('onSearch',form)">搜索</el-button>
        </el-row>
      </el-col>
    </el-row>
  </el-form>

</template>

<script>
import { list } from '@/api/base/menus'
import { simple } from '@/api/hmmm/tags'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { simple as subjectsSimple } from '@/api/hmmm/subjects'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance,
  onMounted
}
  from 'vue'
import { provinces, citys } from '@/api/hmmm/citys'
import { ref } from '_vue@3.2.40@vue'
export default defineComponent({
  components: {},
  props: {
    list: {
      type: Object,
      required: true
    },
    showDailog: {
      type: Boolean,
      required: true
    }
  },
  setup (props, { emit }) {
    // console.log(props.value)
    const state = reactive({
      form: {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creator: undefined,
        remarks: undefined,
        shortName: undefined,
        provinces: undefined,
        citys: undefined
      },
      rules: {},
      subjectIDOptions: list.subjectID,
      catalogIDOptions: [],
      tagsOptions: [],
      questionTypeOptions: [],
      difficultyOptions: [],
      directionOptions: [],
      creatorOptions: [],
      // 城市
      cityOptions: {
        // 所有城市
        provinces: provinces(),
        // 城区
        citys: []
      }
    })
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs.vForm.validate(valid => {
        if (!valid) return
        // TODO: 提交表单
        console.log(1)
      })
    }
    // ----清除按钮----
    const vForm = ref(null)
    function empty () {
      vForm.value.resetFields()
      emit('getList')
    }
    // 省市联动
    function changeCity (val) {
      state.cityOptions.citys = citys(val)
    }
    async function getSubjectIDOptions () {
      const { data } = await subjectsSimple()
      state.subjectIDOptions = data
    }
    // 标签
    async function getTagsOptions () {
      // state.tagsOptions = await simple()
      const { data } = await simple()
      state.tagsOptions = data
    }
    // ---学科下拉菜单----
    async function change (val) {
      const { data } = await directorysSimple({ subjectID: val })
      state.form.catalogID = undefined
      state.catalogIDOptions = data
      console.log(val)
    }
    // 二级目录
    // async function getcatalogIDOptions () {
    //   // state.tagsOptions = await simple()
    //   const { data } = await directorysSimple()
    //   state.catalogIDOptions = data
    // }
    state.difficultyOptions = difficulty
    state.questionTypeOptions = questionType
    state.directionOptions = direction
    onMounted(() => {
      getTagsOptions()
      getSubjectIDOptions()
    })
    return {
      ...toRefs(state),
      submitForm,
      vForm,
      empty,
      getTagsOptions,
      getSubjectIDOptions,
      change,
      changeCity
    }
  }
})

</script>

<style lang="scss">
.header {
  height: 50px;
}

.el-select {
  width: 100%;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
</style>
